<template>
  <div class="one">
    <img :src="imageUrl" alt="" width="100%" height="120%" class="image" >
    <div class="login">
     
    <el-form  :model="form" label-width="80px" class="login-box">
      <h3 class="login-title">管理员登录</h3>
      <el-form-item label="账号" prop="adminname">
        <el-input type="text" placeholder="请输入账号" v-model="form.adminname" />
      </el-form-item>
      <el-form-item label="密码" prop="passwd">
        <el-input type="password" placeholder="请输入密码" v-model="form.passwd" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAdminlogin()">登录</el-button>
      </el-form-item>
    </el-form>

    
</div>        


 </div>
  
</template>

<script>
 console.log("admin");
import Loading from '@/components/loading/Loading.vue'

export default {
  name: "Login",
  components: {
    Loading
  },
  data() {
    return {
       showLoading: true,
      imageUrl: require('../../assets/images/bg-img-1.jpg'),
      form: {
        adminname: '',
        passwd: ''
      },
      LogList:[{
        id:'', 
        loginName:'', 
        loginDate:'', 
        loginNumber:''
      }]
     
    }
  },
  methods:{
    getAdminlogin(){  
      this.$axios.get("/admin/login",{params:this.form}).then(
        res=>{
          
          //将得到的管理员账号密码存到LocalStorage中
           localStorage.setItem("admin",res.data.adminName);
         
        
          
          if(this.form.adminname==res.data.adminName&&this.form.passwd==res.data.passwd){
           alert("登录成功");
           //用于日志记录管理员登录信息
           this.LogList.loginName=localStorage.getItem("admin")
            this.$axios.get("/log/addLog",{params:{loginName:this.LogList.loginName}}).then(res=>{
                console.log(res)
            })

          this.$router.push({path:'/index'});
        }
        else{
         alert("密码或者账号错误");
        }
        }
      )
    },
  },mounted () {
    let bgImg = new Image()
    bgImg.src = this.imageUrl
    bgImg.onerror = () => {
      console.log('img onerror')
    }
    bgImg.onload = () => { // 图片加载成功后 去除loading
      this.showLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.one{
  height: 100%;
}

.login-box {
 
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  position: absolute;
  top:-175px;
  left: 3px;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
.image{
  position: absolute;
  display: block;
  top: 0px ;
  left: 0px;
  bottom: 0px;
  z-index: 1;

}
.login {
  max-width: 350px;
  margin: 60px auto;
  background: #fff;
  padding: 20px 40px;
  border-radius: 10px;
  position: relative;
  z-index: 9;
  height: 270px;
  top:60px;
}
</style>

